<template>
    <div class="selw">
        <div class="ses">
            <div class="t-d">
                <div>
                    <img v-if="bh" @click="bhClick" class="ty-img" src="/img/main-img/资源2@2x-8.png">
                    <img v-else @click="bhClick" class="ty-img" src="/img/main-img/资源1@2x-8.png">
                </div>
                <div class="sp">
                    <span class="le">百乐购超市&nbsp;＞</span>
                    <span class="le">凑单</span>
                </div>
            </div>
            <div class="sel">
                <img v-if="bh" @click="bhClick" class="ty-img" src="/img/main-img/资源2@2x-8.png">
                <img v-else @click="bhClick" class="ty-img" src="/img/main-img/资源1@2x-8.png">
                <div class="sell">
                    <img class="img" src="/img/main-img/资源24.png">
                    <div>
                        <p>新疆哈密瓜</p>
                        <p>重量：0.78kg</p>
                        <p><span>￥{{danjia}}</span></p>
                    </div>
                </div>
                <div class="gw">
                    <span @click="jianClick" class="sp1">-</span>
                    <span class="sp2">{{shu}}</span>
                    <span @click="jiaClick" class="sp3">+</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bh:true,
            shu:1,
            danjia:50
        }
    },
    methods:{
        bhClick(){
            if(this.bh==false){
                this.bh = true;
            }else if(this.bh==true){
                this.bh = false;
            }
        },
        jiaClick(){
            this.shu+=1;
        },
        jianClick(){
            this.shu-=1;
            if(this.shu<1){
                this.shu=1;
            }
        }
    }
}
</script>
<style scoped>
    .selw{
        width: 100vw;
        text-align: center;
        margin: 4vw 0;
    }
    .ses{
        width: 93vw;
        margin: 0px auto;
        border-radius: 2vw;
        box-shadow: 0px 0px 1vw 0px #dddddd;
        background-color: white;
        padding: 2vw 4vw;
    }
    .sel{
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    .sell{
        display: flex;
        position: relative;
        left: -27vw;
    }
    .sell div{
        padding: 5vw 0;
    }
    .img{
        /* border: 1px solid black; */
        width: 30vw;
    }
    p:nth-of-type(1){
        color: #666666;
        font-size: 4.5vw;
    }
    p:nth-of-type(2){
        color: rgb(185, 185, 185);
        font-size: 3.5vw;
        border-radius: 0.9vw;
        margin: 0.8vw 0; 
        text-align: left;
    }
    p:nth-of-type(3){
        color: red;
        text-align: left;
        font-size: 3.5vw;
    }
    p span{
        font-size: 5vw;
    }
    .t-d{
        display: flex;
    }
    .t-d div{
        position: relative;
        left: 0;
        top: -9vw;
    }
    .t-d .sp{
        font-size: 4vw;
        width: 80vw;
        position: relative;
        left: 0;
        top: 0.5vw;
        display: flex;
        justify-content: space-between;
    }
    .t-img{
        width: 7vw;
        position: relative;
        left: -2vw;
        cursor: pointer;
    }
    .ty-img{
        width: 7vw;
        height: 7vw;
        position: relative;
        left: -2vw;
        top: 10vw;
        cursor: pointer;
    }
    .gw{
        position: absolute;
        left: 62vw;
        top: 20vw;
    }
    .sp1{
        display: inline-block;
        width: 6vw;
        border: 1px solid #bbbbbb;
        border-radius: 1vw 0 0 1vw;
        position: relative;
        left: 2.7vw;
        cursor: pointer;
    }
    .sp2{
        display: inline-block;
        width: 8vw;
        border: 1px solid #bbbbbb;
        position: relative;
        left: 1.3vw;
    }
    .sp3{
        display: inline-block;
        width: 6vw;
        border: 1px solid #bbbbbb;
        border-radius: 0 1vw 1vw 0;
        cursor: pointer;
    }
    .le{
        color: #777777;
    }
</style>